<template>
	<div class="common-layout">
		<el-container>
			<el-header>
				<Header></Header>
			</el-header>
			<el-main>
				<div v-if="target">
				<div class="top">
					<h3 style="margin-bottom: 20px;">退款记录</h3>
				</div>
				<el-row style="margin-left: 20px;">
					<el-col :span="12">
				      <el-statistic title="累计退款金额(元)" :value="rebated" />
				    </el-col>
					<el-col :span="12">
					  <el-statistic title="退款中金额(元)" :value="rebateing" />
					</el-col>
				</el-row>
				<el-form label-width="auto" style="width: 100%;margin: 15px 0;" class="item1">
					<el-form-item label="会员信息" label-width="80">
						<el-input clearable style="width: 200px;" placeholder="请输入会员昵称或者手机号" v-model="value1" />
					</el-form-item>
					<el-form-item label="退款单号" label-width="80">
						<el-input clearable style="width: 200px;" placeholder="请输入退款单号" v-model="value2" />
					</el-form-item>
					<!-- <el-form-item label="来源单号" label-width="90">
						<el-input clearable style="width: 200px;" placeholder="请输入会员昵称或者手机号" v-model="value3" />
					</el-form-item> -->
					<el-form-item label="退款状态" label-width="80">
						<el-select style="width: 200px"  clearable placeholder="请选择" v-model="value4" >
							<el-option label="待审核" :value="1" />
							<el-option label="待转账" :value="2" />
							<el-option label="已转账" :value="3" />
							<el-option label="未通过" :value="4" />
						</el-select>
					</el-form-item>
					<el-form-item label="退款时间" label-width="80">
						<el-date-picker 
							v-model="value5"
							type="date"
							placeholder="开始时间"
							format="YYYY-MM-DD"
							value-format="YYYY-MM-DD" 
							style="width: 120px;"
						/>-
						<el-date-picker 
							v-model="value6"
							type="date"
							placeholder="结束时间"
							format="YYYY-MM-DD"
							value-format="YYYY-MM-DD" 
							style="width: 120px;"
						/>
					</el-form-item>
					<el-button type="primary" style="margin-left: 15px;" @click="search">搜索</el-button>
					<el-button @click="reset">重置</el-button>
				</el-form>
				<el-table style="width: 100%" :data="tableData" ref="multipleTableRef" height="40vh">
					<el-table-column prop="userId" label="会员信息" />
					<el-table-column prop="financeCode" label="退款单号"/>
					<el-table-column prop="finalMoney" label="充值金额" />
					<el-table-column prop="payMethod" label="退款来源" />
					<el-table-column prop="examineMoney" label="退款金额" />
					<el-table-column prop="lastTime" label="退款时间" />
					<el-table-column prop="financeStatus" label="状态"/>
					<el-table-column label="操作" >
						<template #default="record">
							<a class="mya" @click="detail(record.row)">详情</a>
						</template>
					</el-table-column>
				</el-table>
				<el-pagination
					layout="prev,pager,next"
					:page-count="total"
					:page-size="pageSize"
					v-model:current-page="pageIndex"	
					@current-change="changePage"
				></el-pagination>
				</div>
				
				
				<div v-else>
					<div style="display: flex;align-items: center;margin-bottom: 10px;">
						<span style="margin-right: 10px;cursor: pointer;display: flex;align-items: center;" @click="back">
							<el-icon><ArrowLeft /></el-icon>
							<span>返回</span>
							<span style="margin-left: 10px;">|</span>
						</span>
						<h3>退款详情</h3>
					</div>
					<!-- <div style="margin: 20px 0;">
						<span @click="back" style="padding: 0 15px;"><el-icon><ArrowLeft /></el-icon>返回</span>
						<span style="font-size: 22px;">退款详情</span>
					</div> -->
					<div class="myform">
						<div>
							<span class="characters">买家：</span>
							<span class="record">{{myform.userId}}</span>
						</div>
						<div>
							<span class="characters">订单单号：</span>
							<span class="record">{{myform.financeCode}}</span>
						</div>
						<div>
							<span class="characters">支付方式：</span>
							<span class="record">{{myform.payMethod}}</span>
						</div>
						<div>
							<span class="characters">手续费：</span>
							<span class="record">{{myform.handlingFees}}</span>
						</div>
						<div>
							<span class="characters">创建时间：</span>
							<span class="record">{{myform.createTime}}</span>
						</div>
						<div>
							<span class="characters">订单状态：</span>
							<span class="record">{{myform.financeStatus}}</span>
						</div>
						<div>
							<span class="characters">申请金额：</span>
							<span class="record">{{myform.examineMoney}}</span>
						</div>
						<div>
							<span class="characters">最终发放金额：</span>
							<span class="record">{{myform.finalMoney}}</span>
						</div>
					</div>
				</div>
				
			</el-main>
		</el-container>
	</div>

</template>

<script setup>
import Header from "@/components/Header.vue"
import { ref,reactive } from 'vue';
import RechargeOrderDetail from './RechargeOrderDetail.vue';
import { Plus ,ArrowLeft} from '@element-plus/icons-vue';
import { GetVipRefundList } from '@/api'
	// 列表
	let tableData = ref([])
	// 分页
	let pageIndex=ref(1);
	let pageSize=5;
	let total=ref(0);
	
	let rebateing = ref("")
	let rebated = ref("")
	//获取退款记录列表
	const RefundRecordsList =async ()=>{
		let res = await GetVipRefundList({
			siteId:1,
			pageSize:pageSize,
			pageIndex:pageIndex.value
		})
		// console.log("res",res)
		tableData.value = res.list
		total.value=res.pageCount
		rebateing.value = res.in
		rebated.value = res.had
	}
	RefundRecordsList()
	
	
	//点击分页器
	const changePage=(page)=>{
		// console.log(page)
		pageIndex.value=page;
		search()
	}
	
	//点击详情
	let target=ref(true)
	let myform = reactive()
	const detail = (item)=>{
		myform = item
		target.value=false
	}
	
let value1 = ref('')


let value2 = ref('')

let value3 = ref('');

let value4 = ref('');

// 退款时间-----起始时间
let value5 = ref('')
let defaultTime = new Date(2000, 1, 1, 12, 0, 0)
// 退款时间-----结束时间
let value6 = ref('')
let defaultTime2 = new Date(2000, 1, 1, 12, 0, 0)

//点击搜索
	const search =async ()=>{
		let res = await GetVipRefundList({
			siteId:1,
			pageSize:pageSize,
			pageIndex:pageIndex.value,
			financeStatus:value4.value,
			userId:value1.value,
			financeCode:value2.value,
			createTime:value5.value,
			createTime2:value6.value
		})
		tableData.value = res.list
		total.value=res.pageCount
		// console.log("搜索",res)
	}

//点击重置
	const reset = ()=>{
		
		value1.value = ""
		value2.value = ""
		value4.value = ""
		value5.value = ""
		value6.value = ""
		RefundRecordsList()
	}
	// 点击返回
	const back =()=>{
		target.value=true
	}
</script>

<style lang="less" scoped>
	.common-layout {
		background: #f2f3f5;
		.el-header {
			padding: 0 !important;
			height: 10vh;
		}
		.el-main {
			height: 86vh;
			// padding: 0;
			width: 98%;
			background: #fff;
			margin: 10px auto;
		}
		.item1{
			margin-top: 30px;
			display: flex;
			flex-wrap: wrap;
		}
		.mya{
			color: #4b5db9;
			margin:0 4px;
			cursor: pointer;
		}
	}
	
	.myform{
		margin-top: 20px;
		margin-left: 50px;
		.characters{
			display: inline-block;
			text-align: right;
			height: 35px;
			line-height: 35px;
			width: 140px;
		}
		.record{
			display: inline-block;
			padding-left: 10px;
			height: 35px;
			line-height: 35px;
		}
	}

</style>